<template>
  <DataVChart :option="defaultOption" ref="chart" />
</template>
<script>
import defaultOption from "./option";
import DataVChart from "../data-v-chart";
export default {
  name: "data-v-circle-chart",
  components: {
    DataVChart,
  },
  props: {
    config: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      defaultOption: defaultOption,
    };
  },
  mounted() {
    this.setChart(this.config);
  },
  watch: {
    config(cfg) {
      this.setChart(cfg);
    },
  },
  methods: {
    setChart(cfg) {
      let chart = this.$refs["chart"].chart;
      let dt = cfg.data;
      if (chart) {
        chart.setOption({
          ...cfg,
          series: [
            {
              type: "pie",
              data: dt,
            },
          ],
        });
      }
    },
  },
};
</script>
